<template>
  <j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="handleOk" 
    @cancel="handleCancel" :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" dialogClass="dialogClass">
    <div class="contentDialog">
      <a-icon v-if="ids.length > 1" class="changeIcon" type="left-circle" @click="toNext"/>
      <div>
        <div v-if="ids.length > 1" style="text-align: right">
          <a-checkbox v-model="ids[current - 1].checked" @change="selectedChange">
          </a-checkbox>
        </div>
        <div :style="{'margin': ids.length > 1 ? '0' : '10px 60px'}" style="width: 553px;margin-top:10px;line-height: 40px;" >
          <table align="center" style="width: 100%;border-collapse: collapse;">
            <tr>
              <th style="font-weight: bold;font-size: 16px;" :style="{border:isBorder}" align="center" valign="middle" :colspan="4">公众反馈登记表</th>
            </tr>
            <tr>
              <td style="padding-left: 12px" :style="{border:isBorder}" align="left" valign="middle" :colspan="4">工单编号：{{tableData.id}}</td>
            </tr>
            <tr>
              <th style="" :style="{border:isBorder}" align="center" valign="middle">
                反馈人</th>
              <td style="" :style="{border:isBorder}" align="center" valign="middle">
                  {{tableData.submitPerson}}
              </td>
              <th style="" :style="{border:isBorder}" align="center" valign="middle">
                电话号码</th>
              <td style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  {{tableData.phone}}
              </td>
            </tr>
            <tr>
              <th style="" :style="{border:isBorder}" align="center" valign="middle">
                登记单位</th>
              <td style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  {{tableData.enterpriseName}}
              </td>
              <th style="" :style="{border:isBorder}" align="center" valign="middle">
                初重信</th>
              <td style="" :style="{border:isBorder}" align="center" valign="middle">
                {{ tableData.againSubmit }}
              </td>
            </tr>
            <tr>
              <th style="" :style="{border:isBorder}" align="center" valign="middle">
                反馈人地址</th>
              <td :colspan="3" style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                {{tableData.address}}
              </td>
            </tr>
            <tr>
              <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                问题发生地</th>
                <td :colspan="3" style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  {{tableData.position}}
                </td>
            </tr>
            <tr>
              <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                提交日期</th>
                <td :colspan="3" style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  {{tableData.submitTime}}
                </td>
            </tr>
            <tr>
              <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                反馈类型</th>
                <td :colspan="3" style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  {{tableData.typeDictText}}
                </td>
            </tr>
            <tr>
              <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                事项目的</th>
                <td :colspan="3" style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  求决
                </td>
            </tr>
            <tr>
              <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                问题描述</th>
                <td :colspan="3" style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  {{tableData.description}}
                </td>
            </tr>
            <tr>
              <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                办理方式</th>
                <td style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  转送
                </td>
                <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                去向</th>
                <td style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  {{tableData.destination}}
                </td>
            </tr>
            <tr>
              <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                答复内容</th>
                <td :colspan="3" style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  {{tableData.handleDtl}}
                </td>
            </tr>
            <!-- <tr>
              <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                补充答复</th>
                <td :colspan="3" style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  描述
                </td>
            </tr> -->
            <tr>
              <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                经办人</th>
                <td style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  {{tableData.operatorName}}
                </td>
                <th style=""  :style="{border:isBorder}" align="center" valign="middle">
                经办时间</th>
                <td style="line-height: 1.5;" :style="{border:isBorder}" align="center"
                valign="middle">
                  {{tableData.handleDate}}
                </td>
            </tr>
          </table>
        </div>
        <div class="total">
          {{current}}/{{ids.length}}
        </div>
      </div>
      <a-icon v-if="ids.length > 1" class="changeIcon" type="right-circle" @click="toLast"/>
    </div>
  </j-modal>
</template>

<script>
import {
  getFeedDetail,
  exportFeedList
  } from '@/api/statisticQr'
export default {
  name: 'TerminalRankDialog',
  components: {
  },
  data() {
    return {
      current: 1,
      isBorder: '1px solid #000000',
      ids:[],
      areaId:'',
      columns: [
        {
          title: '区域',
          dataIndex: 'areaId',
          key: 'areaId',
          align: 'center'
        },
        {
          title: '关联终端',
          dataIndex: 'terminalName',
          key: 'terminalName',
          align: 'center'
        },
        {
          title: '设备名称',
          dataIndex: 'deviceName',
          key: 'deviceName',
          align: 'center'
        },
        {
          title: '累计报警次数',
          dataIndex: 'alarmCount',
          key: 'alarmCount',
          align: 'center'
        },
      ],
      labelCol: { span: 7 },
      wrapperCol: { span: 15 },
      queryParams: {},
      title: '反馈单导出',
      width: 720,
      visible: false,
      disableSubmit: false,
      tableData: {},
    }
  },
  watch: {
    visible: {
      handler: function (val) {
        if (val) {
          // this.getList(this.areaId)
        }
      },
      immediate: true
    },
    ids:{
      handler: function(val){
        if(val.length){
          console.log(val,this.current,'val--监听id变化')
          const {id, checked} = val[this.current - 1]
          console.log(id,'watch-id')
          this.getFeedDetail(id)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 查询反馈单详情
    getFeedDetail(id){
      console.log(id,'进来了么啊')
      getFeedDetail({id}).then(res => {
        console.log(res,'res--反馈单详情')
        this.tableData = res.data
      })
    },
    selectedChange(e){
      console.log(e.target.checked, 'val')
      this.ids[this.current - 1].checked = val
    },
    // 下一页
    toLast(){
      if(this.current >= this.ids.length ){
        this.$message.warning('已是最后一页！')
      }else{
        this.current += 1
        console.log(this.current,'current - 下一页')
        const {id} = this.ids[this.current - 1]
        this.getFeedDetail(id)
      }
    },
    // 上一页
    toNext(){
      if(this.current === 1){
        this.$message.warning('已是第一页！')
      }else{
        this.current -= 1
        console.log(this.current,'current - 上一页')
        const {id} = this.ids[this.current - 1]
        this.getFeedDetail(id)
        
      }
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    
    // 点击确认导出
    handleOk() {
      // this.$refs.realForm.submitForm();
      this.ids.forEach(item => {
        if (item.checked) {
          // 调用导出接口
          this.exportFeedList(item.id)
        }
      })
    },
    async exportFeedList(id) {
      const res = await exportFeedList({id})
      console.log(res, 'res')
      const fileName = '反馈单导出' + new Date().getTime()
      let url = window.URL.createObjectURL(res)
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) //下载完成移除元素
      window.URL.revokeObjectURL(url) //释放掉blob对象
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>
<style lang="less">
.dialogClass {
  font-family: PingFang SC, PingFang SC;
  color: #5E5E5E;
  text-align: center;
  .ant-checkbox-inner{
    border-radius: 50px;
  }
  .ant-modal-body{
    background: #F4F6F8
  }
  .changeIcon{
    font-size: 24px;
    color: #BFBFBF
  }
  .contentDialog{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .j-modal-title-row .left{
    margin-left: 56px !important;
  }
  td{
    height: 40px;
  }
  tr{
    height: 40px;
  }
  .ant-modal-header {
    text-align: center;
    background-image: url('../../../../assets/statistic/dialogTitleBg.png');
    background-size: 100% 100%;
    .ant-modal-title {
      color: #fff;
    }
  }
  .ant-modal-close {
    color: #fff !important;
  }
  .total{
    margin-top: 40px;
    text-align: center;
  }
}
</style>